import React from 'react';
import { connect } from 'umi';
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import styles from './index.less';

const Login = ({ loading, dispatch }) => {
  const formItemLayout = {
    wrapperCol: { span: 24 },
  };

  const onFinish = (values) => {
    dispatch({
      type: 'global/login',
      payload: {
        ...values,
      },
    });
  };

  return (
    <div className={styles.body}>
      <div className={styles.box}>
        <img src={require('../../assets/login.png')} />
        <div className={styles.form}>
          <h3 className={styles.welcome}>欢迎登录</h3>
          <Form {...formItemLayout} onFinish={onFinish}>
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入用户名',
                },
              ]}
            >
              <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                { required: true, message: '请输入密码' },
                { min: 6, message: '密码最少6位数' },
                { max: 18, message: '密码最多18位数' },
                {
                  pattern: new RegExp('^\\w+$', 'g'),
                  message: '账号必须字母或数字',
                },
              ]}
            >
              <Input
                prefix={<LockOutlined />}
                type="password"
                autoComplete="off"
                placeholder="请输入密码"
              />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                style={{ width: '100%' }}
              >
                {loading ? '登录中' : '登录'}
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default connect(({ loading }) => ({
  loading: loading.models.global,
}))(Login);
